<template>
  <view class="custom-tab-bar">
    <view 
      class="tab-item" 
      :class="{ active: selected === index }" 
      v-for="(item, index) in tabList" 
      :key="index"
      @click="switchTab(index, item)"
    >
      <!-- 普通导航项 -->
      <template v-if="index !== 2">
        <view class="tab-icon">
          <image 
            :src="getIconPath(item.iconPath, item.selectedIconPath, selected === index)" 
            class="icon-img"
          />
        </view>
        <text class="tab-text">{{ item.text }}</text>
      </template>
      
      <!-- 中间的发布按钮 -->
      <template v-else>
        <view class="publish-circle">
          <image src="/static/icons/plus.svg" class="plus-icon" />
        </view>
      </template>
    </view>
  </view>
  
  <!-- 发布弹窗 -->
  <PublishModal 
    :visible="showPublishModal" 
    @close="closePublishModal"
    @publishActivity="handlePublishActivity"
    @publishMoment="handlePublishMoment"
    @quickPublish="handleQuickPublish"
    @wechatGroup="handleWechatGroup"
    @hostEntry="handleHostEntry"
  />
</template>

<script setup>
import { ref } from 'vue'
import {onShow,onLoad} from '@dcloudio/uni-app';

import PublishModal from '../../../components/PublishModal.vue'

// 当前选中的标签索引
const selected = ref(0)

// 发布弹窗显示状态
const showPublishModal = ref(false)

// tabBar配置列表
const tabList = ref([
  {
    pagePath: "/pages/home/index",
    text: "首页",
    iconPath: "/static/icons/home.svg",
    selectedIconPath: "/static/icons/home-active.svg"
  },
  {
    pagePath: "/pages/bbs/index", 
    text: "广场",
    iconPath: "/static/icons/square.svg",
    selectedIconPath: "/static/icons/square-active.svg"
  },
  {
    pagePath: "/pages/index/index",
    text: "发布",
    iconPath: "/static/icons/plus.svg",
    selectedIconPath: "/static/icons/plus.svg"
  },
  {
    pagePath: "/pages/messages/index",
    text: "消息", 
    iconPath: "/static/icons/message.svg",
    selectedIconPath: "/static/icons/message-active.svg"
  },
  {
    pagePath: "/pages/my/home/index",
    text: "我的",
    iconPath: "/static/icons/profile.svg", 
    selectedIconPath: "/static/icons/profile-active.svg"
  }
])

// 获取图标路径
const getIconPath = (iconPath, selectedIconPath, isSelected) => {
  return isSelected ? selectedIconPath : iconPath
}

// 切换标签
const switchTab = (index, item) => {
  if (index === 2) {
    // 发布按钮的特殊处理
    handlePublish()
    return
  }
  
  // 先更新选中状态
  selected.value = index
  
  // 使用uni.switchTab进行页面跳转
  uni.switchTab({
    url: item.pagePath,
    success: () => {
      // 跳转成功后确保状态正确
      console.log('页面跳转成功，当前选中:', index)
    },
    fail: (err) => {
      console.error('切换页面失败:', err)
      // 跳转失败时恢复之前的状态
      updateCurrentTab()
    }
  })
}

// 处理发布按钮点击
const handlePublish = () => {
  console.log('点击发布')
  // 显示发布弹窗
  showPublishModal.value = true
}

// 关闭发布弹窗
const closePublishModal = () => {
  showPublishModal.value = false
  // 关闭弹窗后确保当前tab状态正确
  updateCurrentTab()
}

// 处理发活动
const handlePublishActivity = () => {
  console.log('发活动')
  uni.navigateTo({
    url: '/pages/publish/activity'
  })
}

// 处理发动态
const handlePublishMoment = () => {
  console.log('发动态')
  uni.navigateTo({
    url: '/pages/publish/moment'
  })
}

// 处理一键发布
const handleQuickPublish = () => {
  console.log('一键发布')
  uni.navigateTo({
    url: '/pages/publish/quick'
  })
}

// 处理微信群入驻
const handleWechatGroup = () => {
  console.log('微信群入驻')
  uni.navigateTo({
    url: '/pages/wechat/group'
  })
}

// 处理主理人入驻
const handleHostEntry = () => {
  console.log('主理人入驻')
  uni.navigateTo({
    url: '/pages/host/entry'
  })
}

// 更新当前选中的tab
const updateCurrentTab = () => {
  const pages = getCurrentPages()
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1]
    const currentRoute = '/' + currentPage.route
    
    // 找到当前页面对应的tab索引
    const currentIndex = tabList.value.findIndex(item => item.pagePath === currentRoute)
    if (currentIndex !== -1 && currentIndex !== 2) { // 排除发布按钮
      selected.value = currentIndex
      console.log('更新当前选中tab:', currentIndex, currentRoute)
    }
  }
}

// 初始化时获取当前页面
onLoad(() => {
  updateCurrentTab()
})

// 页面显示时更新状态
onShow(() => {
  updateCurrentTab()
})
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 8px 0 20px 0;
  z-index: 1000;
  height: 70px;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 移除所有按下效果 */
.tab-item:active {
  background: none !important;
  transform: none !important;
}

.tab-icon {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img {
  width: 24px;
  height: 24px;
}

.plus-icon {
  width: 28px;
  height: 28px;
}

.tab-text {
  font-size: 11px;
  color: #999;
  font-weight: 400;
  line-height: 1;
}

.tab-item.active .tab-text {
  color: #000;
  font-weight: 500;
}

/* 发布按钮样式 */
.tab-item:nth-child(3) {
  position: relative;
  margin-top: -20px;
}

.publish-circle {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
  transition: all 0.2s ease;
}

/* 移除发布按钮的按下效果 */
.tab-item:nth-child(3):active .publish-circle {
  transform: none !important;
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%) !important;
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3) !important;
}

/* 响应式适配 */
@media (max-width: 375px) {
  .tab-text {
    font-size: 10px;
  }
  
  .publish-circle {
    width: 50px;
    height: 50px;
  }
  
  .plus-icon {
    width: 24px;
    height: 24px;
  }
}
</style> 